<template>
  <el-table :data="tableData" style="width: 100%">
    <!-- 静态列 -->
    <el-table-column prop="time" label="时间" width="180" />
    <el-table-column prop="batch" label="物料批次" width="120" />
    <el-table-column prop="facility_name" label="设备名称" width="120" />
    <el-table-column prop="facility_serial" label="设备编号" width="120" />
    <el-table-column prop="serial" label="物料编号" width="120" />
    <el-table-column prop="status" label="是否合格" width="100">
      <template #default="scope">
        <el-tag :type="scope.row.status ? 'success' : 'danger'">
          {{ scope.row.status ? '合格' : '不合格' }}
        </el-tag>
      </template>
    </el-table-column>
    <!-- <el-table-column  label="floor" width="100">
   <template ><div>6</div></template>
    </el-table-column>
    <el-table-column  label="key" width="100">
   <template ><div>判定压力</div></template>
    </el-table-column>
    <el-table-column  label="upper" width="100">
   <template ><div>18</div></template>
    </el-table-column>
    <el-table-column  label="uuid4" width="100">
   <template ><div>xxxxxx</div></template>
    </el-table-column>
    <el-table-column  label="value" width="100">
   <template ><div>13.41</div></template>
    </el-table-column> -->
    <!-- 动态列 -->
    <el-table-column
      v-for="col in dynamicColumns"
      :key="col.prop"
      :label="col.label"
      :width="col.width"
    >
      <template #default="scope">
        <div v-if="scope.row.db_message_resp">
          <div v-for="(item, index) in scope.row.db_message_resp" :key="index">
            {{ item[col.prop] }}
          </div>
        </div>
      </template>
    </el-table-column>
    

  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          batch: "XC",
          db_message_resp: [
            { "floor": 6, "key": "判定压力", "upper": 18, "uuid4": "xxx", "value": 13.54 },
            { "floor": 59.99, "key": "判定距离", "upper": 60.19, "uuid4": "xxx", "value": 60.108 },
            { "floor": 12.45, "key": "压装高度值1", "upper": 12.75, "uuid4": "xxx", "value": 12.645 },
            { "floor": 12.45, "key": "压装高度值2", "upper": 12.75, "uuid4": "xxx", "value": 12.6252 },
            { "floor": 12.45, "key": "压装高度值3", "upper": 12.75, "uuid4": "xxx", "value": 12.5952 },
            { "floor": 0.03, "key": "端面间隙1", "upper": 0.055, "uuid4": "xxx", "value": 0.0314 },
            { "floor": 6, "key": "端面间隙2", "upper": 18, "uuid4": "xxx", "value": 12.4446 },
            { "floor": 59.99, "key": "端面间隙3", "upper": 60.19, "uuid4": "xxx", "value": 60.0485 },
            { "floor": 6, "key": "最终压力", "upper": 18, "uuid4": "xxx", "value": 13.54 },
            { "floor": 59.99, "key": "最终距离", "upper": 60.19, "uuid4": "xxx", "value": 60.108 }
          ],
          facility_name: "壳体上料",
          facility_serial: "YB06-33",
          serial: "SDS",
          status: true,
          time: "2025-04-25 17:06:22"
        },
        {
          batch: "XC",
          db_message_resp: [
            { floor: 6, key: "判定压力", upper: 18, uuid4: "xxx", value: 13.54 },
            { floor: 59.99, key: "判定距离", upper: 60.19, uuid4: "xxx", value: 60.108 },
            { floor: 12.45, key: "压装高度值1", upper: 12.75, uuid4: "xxx", value: 12.645 },
            { floor: 12.45, key: "压装高度值2", upper: 12.75, uuid4: "xxx", value: 12.6252 },
            { floor: 12.45, key: "压装高度值3", upper: 12.75, uuid4: "xxx", value: 12.5952 },
            { floor: 0.03, key: "端面间隙1", upper: 0.055, uuid4: "xxx", value: 0.0314 },
            { floor: 6, key: "端面间隙2", upper: 18, uuid4: "xxx", value: 12.4446 },
            { floor: 59.99, key: "端面间隙3", upper: 60.19, uuid4: "xxx", value: 60.0485 },
            { floor: 6, key: "最终压力", upper: 18, uuid4: "xxx", value: 13.54 },
            { floor: 59.99, key: "最终距离", upper: 60.19, uuid4: "xxx", value: 60.108 }
          ],
          facility_name: "壳体上料",
          facility_serial: "YB06-33",
          serial: "ddds",
          status: true,
          time: "2025-04-25 18:21:12"
        }
      ]
    };
  },
  computed: {
    dynamicColumns() {
      if (this.tableData.length > 0 && this.tableData[0].db_message_resp) {
        const firstItem = this.tableData[0].db_message_resp[0];
        return Object.keys(firstItem).map(key => ({
          prop: key,
          label: key,
          width: key === "uuid4" ? 300 : 100
        }));
      }
      return [];
    }
  }
};
</script>
